﻿@using MvcSiteMapProvider.Web.Html
@model IEnumerable<store.Product>
<!-- BREADCRUMBS AND DISPLAY MODE -->
<div class="inner-action-bar">
    <div class="container">

        <div class="row">
            <div class="col-xs-12 col-sm-6 center-sm">
                <div class="breadcrumbs">
                    @Html.MvcSiteMap().SiteMapPath()
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 space20 visible-xs"></div>

            <div class="col-xs-12 col-sm-6 center-sm">
                <div class="display-mode">
                    <ul class="unstyled float-right">
                        <li class="active">
                            <a href="javascript:void(0)" id="grid-mode">
                                <span class="icon-grid"></span>
                                Grid
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" id="list-mode">
                                <span class="icon-list"></span>
                                List
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- /BREADCRUMBS AND DISPLAY MODE -->
<!-- SIDEBAR + MAIN CONTENT CONTAINER -->
<div class="main-content">
    <div class="container">

        <div class="row">

            <!-- SIDE BAR -->
            <div class="col-xs-12 col-sm-4 col-lg-3 side">

                <!-- CATEGORIES LIST -->
                @Html.Action("Categorys", "Category")
                <!-- /CATEGORIES LIST -->

                <!-- PRICE RANGE -->
                <div class="section">
                    <h4 class="section-title">Lựa chọn mức giá</h4>
                    <div class="section-body">
                        <ul class="unstyled pretty-list arrow-list">
                            <li><a href="?from=0&to=1000000">Dưới 100.000</a></li>
                            <li><a href="?from=100000&to=200000">100.000 - 200.000</a></li>
                            <li><a href="?from=200000&to=400000">200.000 - 400.000</a></li>
                            <li><a href="?from=400000&to=700000">400.000 - 700.000</a></li>
                            <li><a href="?from=1000000&to=1500000">1000.000 - 1500.000</a></li>
                            <li><a href="?from=1500000&to=10000000">Trên 1500.000</a></li>
                            <li><a href="?from=0&to=10000000">Tất cả mức giá</a></li>
                        </ul>
                    </div>
                </div>
                <!-- /PRICE RANGE -->

                <!-- CHOOSE COLOR -->
                <div class="section">
                    <h4 class="section-title">Chọn màu sắc</h4>
                    <div class="section-body">
                        <ul class="unstyled pretty-list arrow-list">
                            <li><a href="#">Đen</a></li>
                            <li><a href="#">Trắng</a></li>
                            <li><a href="#">Đỏ</a></li>
                            <li><a href="#">Vàng</a></li>
                            <li><a href="#">Xanh</a></li>
                            <li><a href="#">Cam</a></li>
                            <li><a href="#">Hồng</a></li>
                        </ul>
                    </div>
                </div>
                <!-- /CHOOSE COLOR -->

            </div>
            <!-- /SIDE BAR -->

            <!-- MAIN CONTENT -->
            <div class="col-xs-12 col-sm-8 col-lg-9 main">

                <!-- PRODUCT AREA -->
                <div id="product-area" class="section offer products-container portrait" data-layout="grid">

                    <div class="row">
                        @if (!Model.Any())
                        {
                            @Html.Raw("<p>Không có sản phẩm nào trong danh mục này.</p>")
                        }
                        @foreach (var item in Model)
                        {
                            <div class="mix col-xs-12 col-sm-6 col-lg-4">
                                <div class="product" data-price="@item.UnitPrice" data-discount="0" data-name="@item.ProductName" data-filter="special">
                                    <a href="@Url.Action("Detail", "Product", new { id = item.ProductID })" class="product-link clearfix">
                                        <div class="product-thumbnail">
                                            @if (item.Picture != "")
                                            {
                                                var listImg = item.Picture.Split(',');
                                                <img src="~/Files/@listImg[1]" alt="" />
                                            }
                                            <div class="caption bottom-left">@String.Format("{0:0.000}", item.UnitPrice) VND</div>
                                        </div>
                                    </a>
                                    <div class="product-info clearfix">
                                        <h4 class="title">
                                            @Html.ActionLink(item.ProductName, "Detail", "Product", new { id = item.ProductID }, null)
                                        </h4>
                                        <div class="description">
                                            <div class="prices">
                                                <span class="off-price">@String.Format("{0:0.000}", item.UnitPrice) VND</span>
                                                @if (item.OldPrice > 0)
                                                {
                                                    @Html.Raw("- ")<s class="orginal-price">@String.Format("{0:0.000}", item.OldPrice) VND</s>
                                                }

                                            </div>
                                            <div class="text">
                                                <p>@item.ShortDesciption <a href="#" class="readmore" title="read more">[...] </a></p>
                                            </div>
                                            <div class="add-to-cart">
                                                <a href="#" title="Add to Cart" class="btn btn-primary btn-iconed"><i class="icon-cart-3"></i><span>Thêm vào giỏ hàng</span></a>
                                            </div>
                                            <ul class="links">
                                                <li><a href="#" title="Add to Wishlist"><span style="margin-right: 5px;" class="icon-heart"></span>Yêu thích</a></li>
                                            </ul>
                                        </div>
                                        <div class="details">
                                            <p class="by">
                                                by: <a href="#">SHOP</a>
                                            </p>
                                        </div>
                                        <a href="#" class="add-to-cart">
                                            <span class="icon-cart-3" style="font-size: 16px"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>   
                        
                        }
                    </div>

                </div>
                <!-- /PRODUCT AREA -->

                <!-- PAGINATION -->
                <div class="pagination-container">
                    <div class="row">
                        @Html.Raw(ViewBag.HtmlPager)
                    </div>
                </div>
                <!-- PAGINATION -->

            </div>
            <!-- /MAIN CONTENT -->

        </div>

    </div>
</div>
<!-- /MAIN CONTENT -->

@section scripts
{
    @Scripts.Render("~/Content/Home/js/jquery.mixitup.min.js")
    @Scripts.Render("~/Content/Home/js/jquery.nouislider.min.js")
}
